HTML c нуля.

Введение в HTML

Основой Всемирной «паутины» World Wide Web является язык гипертекстовой разметки HTML. Создатель этого языка Тим Бернерс-Ли, разрабатывая его для нужд одного крупного научного центра, даже не предполагал, что его детище вырастет до общемирового масштаба и будет определять развитие компьютерных технологий на многие десятилетия.

Общие сведения о HTML

Приступая к изучению HTML, нужно знать, что это не вполне обычный язык. Он не относится к языкам программирования высокого уровня, таким как С++, Java или Visual Basic. HTML - это, прежде всего, язык разметки, и код, написанный на нем, исполняется на компьютере клиента в приложении Web -браузера. С этим связана его относительная простота и легкость освоения.

Зачем нужен язык разметки?

Когда вы создаете обычный документ в программе текстового процессора, вы легко можете выполнять форматирование документа, например, для символов задать курсивный или полужирный шрифт, абзацу присвоить стиль заголовка или обычного текста и т.д. А в случае Web -страниц пользователь имеет дело не с бумажными, а с электронными документами, полученными через Internet.

Идея решения проблемы обмена документами между различными компьютерами и приложениями через Internet основана на языке разметки гипертекста HTML (HyperText Markup Language). Этот язык был создан более 30 лет назад как стандарт оформления документов и был принят подавляющим большинством пользователей Internet, а главное, - всеми производителями программного обеспечения и оборудования для Web. Документы, размеченные согласно HTML, могут читаться на любом компьютере, на котором установлена всего лишь одна программа просмотра таких документов - браузер.

Благодаря языку разметки HTML, клиент Web может на экране своего компьютера просмотреть документ в том виде, в каком его задумал разработчик: с определенными размерами шрифта и разбивкой на абзацы, с определенным расположением рисунков, гиперссылок и проч. Текстовый документ, составленный на HTML, имеет размер в байтах в несколько раз меньший, чем размер аналогичного документа, подготовленного в текстовом процессоре (например, Word).

В языке HTML имеется множество тегов, среди которых - теги создания заголовка документа, задания параметров шрифта, вычерчивания линий, вставки гиперссылок, вставки графических элементов и т.д. В итоге Web -страница, кроме текста и ссылок, может содержать графику, звуки, видео, то есть иметь такой вид, который вы и видите на экране компьютера.

История HTML и World Wide Web

История языков разметки уходит в 60-е годы 20 в., когда сотрудники компании IBM взялись за решение задач переноса документов между различными платформами и операционными системами. Результатом их усилий стал язык GML (General Markup Language - общий язык разметки), который предназначался для использования на ЭВМ семейства IBM. Этот мощный и универсальный язык разметки, названный SGML (Standard General Markup Language), использовался военным ведомством США при оформлении технической документации.

Следующий этап развития языков разметки связан с Европейским центром ядерных исследований (CERN, г. Женева). Чтобы облегчить доступ к тысячам документов, требовалось создание универсальной системы, которая не зависела бы от используемой компьютерной платформы и в то же время была бы достаточно простой. В начале 80-х годов этой проблемой занялся сотрудник CERN, консультант по программному обеспечению Тим Бернерс-Ли. Для решения этих задач он стал разрабатывать язык разметки, с помощью которого документы воспроизводились бы одинаково на разных компьютерах.

В основу разрабатываемого языка Бернерс-Ли положил язык SGML и приемы работы с гипертекстом, с чем и связано название созданного им языка - HTML. Новый язык использовал основные конструкции SGML для описания документов и гипертекстовых ссылок.

Связи (links) в гипертекстовой структуре осуществляются с помощью ссылок. Благодаря ссылкам, пользователь может из одного документа вызвать другой документ, из него следующий документ и т.д.

В 1989 году Бернерс-Ли предложил для CERN разработать информационную систему, напоминающую паутину документов, связанных ссылками. Документы хранятся на серверах, которые размещаются по всему миру и соединены между собой каналами Интернета. Первоначально эта идея отклика не получила, и из-за бюрократических проволочек работа продвигались медленно. Тогда Бернерс-Ли разработал протокол HTTP - язык, на котором серверы должны обмениваться гипертекстовыми документами, и написал первые программы Web -сервера и браузера. Он обратился напрямую к Интернет- сообществу, и энтузиасты в 1991 году начали создавать первые узлы Web.

В последующие годы система World Wide Web стремительно развивалась, она стала самой популярной службой в Интернете. В настоящее время она удовлетворяет потребности в информации самых широких слоев пользователей, включая в свой состав миллионы узлов Web. На больших узлах размещаются тысячи и сотни тысяч документов, причем общее количество документов в WWW с каждой секундой увеличивается, поскольку над их созданием трудится огромная армия специалистов и любителей в разных уголках земного шара.

Фактически World Wide Web - это гипертекстовое пространство документов, которое не связано с географией размещения самих Web -узлов. Поэтому в этом пространстве физическое расстояние между узлами не имеет смысла. Вы можете на экране монитора одинаково просматривать Web -страницы, которые хранятся как на диске компьютера в соседней комнате, так и на сервере, расположенном в другой стране.

World Wide Web функционирует по определенным стандартам, которые разрабатываются и внедряются объединением исследовательских и промышленных организаций - консорциумом W3C (сокращение от World Wide Web Consortium).

Web -документы, Web -сайты, Web -серверы

К основным достоинствам гипертекстов относятся, во-первых, возможность разместить на небольшом пространстве (в пределах нескольких экранов) огромное количество информации и, во-вторых, интуитивно-понятный способ поиска информации с помощью ссылок.

Ссылки на Web -страницах отображаются выделенными словами или графическими изображениями. Если навести на ссылку указатель мыши, то он обычно превращается с изображение руки с поднятым указательным пальцем. Любая ссылка - это вход в другой документ: щелчок мышью по ссылке открывает другой документ, на который указывает ссылка. Web -страницы обычно организуются в так называемые сайты.

Взаимодействие клиента с Web -сервером происходит согласно протоколу HTTP (HyperText Transport Protocol - протокол передачи гипертекста). Этот протокол определяет язык, на котором клиентская программа «разговаривает» с сервером, а также формат ответов сервера клиенту. Пример работы HTTP пользователь видит всякий раз, когда он щелкает мышью по какой-либо ссылке.

Браузеры

Чтобы отобразить на экране компьютера HTML -документы в том виде, как они задумывались разработчиками, необходимо иметь специальную программу, называемую браузером (по-русски - «обозревателем»). Первые программы браузеров (типа Lynx) предназначались только для просмотра текста. Однако со временем от них потребовалось обрабатывать не только текст, но и графику, звук, видео.

Работа браузера начинается с установления связи с сервером и отправки на сервер адреса запрашиваемой Web -страницы. Отправка запроса на сервер и последующая загрузка Web -страницы являются основными задачами браузера. Обработка браузером HTML - документов заключается, во-первых, в форматировании текста на основании специальных служебных символов (тегов), а, во-вторых, в загрузке дополнительных файлов. Дополнительно загружаемые файлы обеспечивают отображение картинок, воспроизведение звукового сопровождения или видеоклипов и т.д.

Задача просмотра как текстовых, так и графических данных, впервые была решена в браузере Mosaic Впоследствии создатель интерфейса Mosaic, Марк Андриссен, основал компанию Netscape Communications, разработавшую программу популярного браузера Netscape Navigator. Годом позже после Netscape (в 1993 году) была выпущена первая версия браузера Internet Explorer фирмы Microsoft. Потом были браузеры Mozilla, Opera и Google Chrome

Адресация документов в Web

Все файлы в Интернете, в том числе и Web -страницы, идентифицируются с помощью специальных обозначений, называемых URL. Именно с помощью URL вы сообщаете программе браузера, какой файл вам нужен.

Программа браузера использует URL для того, чтобы обратиться к нужному хост- компьютеру и извлечь файл из каталога, в котором он размещен. Этот файл затем будет отображен на мониторе вашего компьютера.

Теговая модель

Разметка HTML-документов выполняется с помощью тегов, которые записываются с соблюдением определенных правил. Теговая модель предполагает разбиение документа на отдельные фрагменты, которые заключаются в теги или начинаются тегом.

Тег(tag - указатель, метка) - это код, идентифицирующий определенный элемент документа HTML, например абзац, заголовок, ссылку, таблицу и т.д. Теги заключаются в угловые скобки < >.

Ваша первая Web-страница

Чтобы лучше представить, о чем пойдет речь, приведем простой пример HTML-документа. Для этого откроем программу "Блокнот" и впишем в новый файл код:

Должно получиться вот так
Заметим, что все теги парные, кроме самого первого.
DOCTYPE используется для того, чтобы браунзер понимал, как следует интерпретировать страницу. Всегда ставится на первую позицию.
Тег HTML указывает на то, что это HTML документ.
Тег HEAD (с англ.- голова) содержит информацию для браузеров и поисковых систем.
Тег BODY (с англ. - тело) обозначает основную частью web-страницы.
Тег TITLE обозначает название документа. Элемент P определяет абзац.

Сохраняем файл в формате .html с кодировкой UTF-8 в свою папку на диске группы.


Вот так выглядит файл в папке после сохранения.

Чтобы увидеть результат в браузере, нужно дважды кликнуть по файлу.

Результат в браузере Google Chrome.